<template>
	<page-layout title="发布内容" @back="goBack">
		<!-- 编辑区域 -->
		<scroll-view class="content-editor" scroll-y="true">
			
			<!-- 图片上传 -->
			<view class="editor-section">
				<view class="image-list">
					<view 
						class="image-item" 
						v-for="(img, index) in postData.images" 
						:key="index"
					>
						<image class="preview-image" :src="img" mode="aspectFill"></image>
						<view class="delete-btn" @tap.stop="removeImage(index)">
							<uni-icons type="close" size="14" color="#ffffff"></uni-icons>
						</view>
					</view>
					
					<view class="upload-btn" @tap="chooseImage" v-if="postData.images.length < 9">
						<uni-icons type="camera" size="24" color="#999999"></uni-icons>
						<text class="upload-text">{{ postData.images.length ? '' : '添加图片' }}</text>
					</view>
				</view>
			</view>
			
			<!-- 标题输入 -->
			<view class="editor-section">
				<input 
					class="title-input" 
					type="text" 
					v-model="postData.title" 
					placeholder="请输入标题"
					maxlength="50"
				/>
				<text class="title-count">{{ postData.title.length }}/50</text>
			</view>
			
			<!-- 内容输入 -->
			<view class="editor-section">
				<textarea 
					class="content-input" 
					v-model="postData.content" 
					placeholder="分享新鲜事..." 
					maxlength="2000"
					:auto-height="true"
				></textarea>
				<text class="content-count">{{ postData.content.length }}/2000</text>
			</view>
			
			<!-- 话题与标签 -->
			<view class="editor-section">
				<view class="tag-list">
					<view class="tag-item" v-for="(tag, index) in postData.tags" :key="index">
						<text>{{ tag }}</text>
						<text class="remove-tag" @tap="removeTag(index)">×</text>
					</view>
					
					<view class="add-tag" @tap="showTagSelector" v-if="postData.tags.length < 5">
						<uni-icons type="tag" size="16" color="#999999"></uni-icons>
						<text>添加话题</text>
					</view>
				</view>
			</view>
			
			<!-- 位置选择 -->
			<view class="editor-section location-section" @tap="chooseLocation">
				<text class="section-label">所在位置</text>
				<view class="location-value">
					<text v-if="postData.location">{{ postData.location }}</text>
					<text v-else class="placeholder">添加位置</text>
					<uni-icons type="location" size="16" color="#999999"></uni-icons>
				</view>
			</view>
			
			<!-- 谁可以看 -->
			<view class="editor-section visibility-section" @tap="changeVisibility">
				<text class="section-label">谁可以看</text>
				<view class="visibility-value">
					<text>{{ visibilityOptions[postData.visibility] }}</text>
					<uni-icons type="right" size="16" color="#999999"></uni-icons>
				</view>
			</view>
		</scroll-view>
		
		<!-- 底部工具栏 -->
		<view class="bottom-toolbar">
			<view class="post-btn-container">
				<button 
					class="post-btn" 
					:disabled="!isValidPost" 
					:class="{ 'btn-active': isValidPost }"
					@tap="submitPost"
				>
					<text v-if="isSubmitting">发布中...</text>
					<text v-else>发布</text>
				</button>
			</view>
		</view>
		
		<!-- 弹出选择器 -->
		<view class="popup-mask" v-if="showPopup" @tap="closePopup"></view>
		<view class="popup-content" v-if="showPopup">
			<view class="popup-header">
				<text class="popup-title">{{ popupTitle }}</text>
				<text class="popup-close" @tap="closePopup">×</text>
			</view>
			
			<scroll-view class="popup-body" scroll-y="true">
				<!-- 话题选择器 -->
				<block v-if="popupType === 'topic'">
					<view class="search-box">
						<uni-icons type="search" size="18" color="#999999"></uni-icons>
						<input 
							type="text" 
							v-model="searchKeyword" 
							placeholder="搜索话题" 
							confirm-type="search"
						/>
					</view>
					
					<view class="topic-list">
						<view 
							class="topic-item" 
							v-for="(topic, index) in filteredTopics" 
							:key="index"
							@tap="selectTopic(topic)"
						>
							<text class="topic-name"># {{ topic }}</text>
							<text class="topic-count">{{ Math.floor(Math.random() * 10000) }}人正在讨论</text>
						</view>
					</view>
				</block>
				
				<!-- 可见性选择器 -->
				<block v-if="popupType === 'visibility'">
					<view 
						class="visibility-item" 
						v-for="(option, key) in visibilityOptions" 
						:key="key"
						@tap="selectVisibility(key)"
					>
						<view class="visibility-info">
							<text class="visibility-name">{{ option }}</text>
							<text class="visibility-desc">{{ getVisibilityDesc(key) }}</text>
						</view>
						<uni-icons type="checkmarkempty" size="24" color="#6e8efb" v-if="postData.visibility === key"></uni-icons>
					</view>
				</block>
			</scroll-view>
		</view>
	</page-layout>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue';
import PageLayout from '@/components/PageLayout.vue';

// 帖子数据
const postData = reactive({
	title: '',
	content: '',
	images: [],
	tags: [],
	location: '',
	visibility: 'public' // public, friends, private
});

// 发布状态
const isSubmitting = ref(false);

// 弹出层控制
const showPopup = ref(false);
const popupType = ref('');
const popupTitle = ref('');
const searchKeyword = ref('');

// 可见性选项
const visibilityOptions = {
	public: '公开',
	friends: '仅好友可见',
	private: '仅自己可见'
};

// 可见性描述
const getVisibilityDesc = (key) => {
	switch (key) {
		case 'public':
			return '所有人都可以看到';
		case 'friends':
			return '仅你的好友可以看到';
		case 'private':
			return '仅自己可见，不会出现在他人的动态中';
		default:
			return '';
	}
};

// 候选话题列表
const hotTopics = [
	'每日话题', '生活记录', '美食分享', '旅行日记', 
	'读书笔记', '电影推荐', '音乐分享', '宠物日常',
	'情感故事', '健康生活', '职场经验', '育儿心得',
	'学习笔记', '摄影作品', '手工制作', '运动健身'
];

// 根据搜索关键词过滤话题
const filteredTopics = computed(() => {
	if (!searchKeyword.value) return hotTopics;
	return hotTopics.filter(topic => 
		topic.toLowerCase().includes(searchKeyword.value.toLowerCase())
	);
});

// 检查帖子是否有效
const isValidPost = computed(() => {
	return postData.content.trim().length > 0;
});

// 返回上一页
const goBack = () => {
	if (postData.content.trim() || postData.title.trim() || postData.images.length > 0) {
		uni.showModal({
			title: '提示',
			content: '是否放弃当前编辑的内容？',
			success: function (res) {
				if (res.confirm) {
					uni.switchTab({
						url: '/pages/index/index'
					});
				}
			}
		});
	} else {
		uni.switchTab({
			url: '/pages/index/index'
		});
	}
};

// 选择图片
const chooseImage = () => {
	uni.chooseImage({
		count: 9 - postData.images.length,
		sizeType: ['compressed'],
		sourceType: ['album', 'camera'],
		success: function (res) {
			postData.images = [...postData.images, ...res.tempFilePaths];
		}
	});
};

// 移除图片
const removeImage = (index) => {
	postData.images.splice(index, 1);
};

// 移除标签
const removeTag = (index) => {
	postData.tags.splice(index, 1);
};

// 显示话题选择器
const showTagSelector = () => {
	popupType.value = 'topic';
	popupTitle.value = '选择话题';
	showPopup.value = true;
};

// 选择话题
const selectTopic = (topic) => {
	if (!postData.tags.includes(topic) && postData.tags.length < 5) {
		postData.tags.push(topic);
	}
	closePopup();
};

// 选择位置
const chooseLocation = () => {
	uni.showToast({
		title: '位置功能开发中',
		icon: 'none'
	});
	
	// 模拟选择位置
	setTimeout(() => {
		postData.location = '北京市朝阳区';
	}, 1000);
};

// 更改可见性
const changeVisibility = () => {
	popupType.value = 'visibility';
	popupTitle.value = '谁可以看';
	showPopup.value = true;
};

// 选择可见性
const selectVisibility = (key) => {
	postData.visibility = key;
	closePopup();
};

// 关闭弹出层
const closePopup = () => {
	showPopup.value = false;
	searchKeyword.value = '';
};

// 提交帖子
const submitPost = () => {
	if (!isValidPost.value || isSubmitting.value) return;
	
	isSubmitting.value = true;
	
	// 模拟发布请求
	setTimeout(() => {
		isSubmitting.value = false;
		
		uni.showToast({
			title: '发布成功',
			icon: 'success'
		});
		
		// 延迟返回，以便用户看到成功提示
		setTimeout(() => {
			uni.switchTab({
				url: '/pages/index/index'
			});
		}, 1500);
	}, 1500);
};
</script>

<style lang="scss">
page {
	background-color: #fff;
	height: 100%;
}

.container {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* 编辑区域 */
.content-editor {
	flex: 1;
	box-sizing: border-box;
}

.editor-section {
	padding: 20rpx 30rpx;
	position: relative;
}

.title-input {
	width: 100%;
	font-size: 34rpx;
	font-weight: 600;
	color: #333;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #ebedf0;
}

.title-count {
	position: absolute;
	right: 30rpx;
	bottom: 20rpx;
	font-size: 24rpx;
	color: #999;
}

.content-input {
	width: 100%;
	font-size: 30rpx;
	color: #333;
	line-height: 1.6;
	padding: 20rpx 0;
	min-height: 200rpx;
}

.content-count {
	position: absolute;
	right: 30rpx;
	bottom: 20rpx;
	font-size: 24rpx;
	color: #999;
}

/* 图片上传 */
.image-list {
	display: flex;
	flex-wrap: wrap;
	margin: 20rpx 0;
}

.image-item,
.upload-btn {
	width: 220rpx;
	height: 220rpx;
	margin-right: 15rpx;
	margin-bottom: 15rpx;
	background: #f5f7fa;
	border-radius: 12rpx;
}

.image-item {
	position: relative;
	overflow: hidden;
}

.preview-image {
	width: 100%;
	height: 100%;
}

.delete-btn {
	position: absolute;
	top: 10rpx;
	right: 10rpx;
	width: 40rpx;
	height: 40rpx;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	
	.iconfont {
		font-size: 24rpx;
		color: #fff;
	}
}

.upload-btn {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border: 1rpx dashed #dcdee0;
	
	.iconfont {
		font-size: 40rpx;
		color: #999;
		margin-bottom: 10rpx;
	}
	
	.upload-text {
		font-size: 26rpx;
		color: #999;
	}
}

/* 标签列表 */
.tag-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 20rpx 0;
}

.tag-item {
	display: flex;
	align-items: center;
	padding: 8rpx 20rpx;
	background: rgba(110, 142, 251, 0.1);
	color: #6e8efb;
	font-size: 26rpx;
	border-radius: 30rpx;
	margin-right: 20rpx;
	margin-bottom: 16rpx;
	
	.remove-tag {
		margin-left: 10rpx;
		font-size: 28rpx;
	}
}

.add-tag {
	display: flex;
	align-items: center;
	padding: 8rpx 20rpx;
	border: 1rpx dashed #dcdee0;
	color: #999;
	font-size: 26rpx;
	border-radius: 30rpx;
	margin-bottom: 16rpx;
	
	.iconfont {
		margin-right: 10rpx;
	}
}

/* 位置和可见性 */
.location-section,
.visibility-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	border-top: 1rpx solid #ebedf0;
}

.section-label {
	font-size: 28rpx;
	color: #333;
}

.location-value,
.visibility-value {
	display: flex;
	align-items: center;
	font-size: 28rpx;
	color: #333;
	
	.placeholder {
		color: #999;
	}
	
	.iconfont {
		font-size: 24rpx;
		color: #999;
		margin-left: 10rpx;
	}
}

/* 底部工具栏 */
.bottom-toolbar {
	height: 100rpx;
	background: #fff;
	border-top: 1rpx solid #ebedf0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 20rpx;
}

.post-btn-container {
	display: flex;
	justify-content: flex-end;
}

.post-btn {
	width: 180rpx;
	height: 70rpx;
	background: #e0e0e0;
	color: #fff;
	border-radius: 35rpx;
	font-size: 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	
	&.btn-active {
		background: #6e8efb;
	}
}

/* 弹出层 */
.popup-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 900;
}

.popup-content {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	border-radius: 20rpx 20rpx 0 0;
	z-index: 999;
	max-height: 70%;
	display: flex;
	flex-direction: column;
}

.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #ebedf0;
}

.popup-title {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
}

.popup-close {
	font-size: 40rpx;
	color: #999;
	padding: 0 20rpx;
}

.popup-body {
	padding: 20rpx 30rpx;
	flex: 1;
	overflow-y: auto;
}

/* 话题选择器 */
.search-box {
	display: flex;
	align-items: center;
	height: 70rpx;
	background: #f5f7fa;
	border-radius: 35rpx;
	padding: 0 24rpx;
	margin-bottom: 30rpx;
	
	.iconfont {
		font-size: 30rpx;
		color: #999;
		margin-right: 10rpx;
	}
	
	input {
		flex: 1;
		font-size: 28rpx;
	}
}

.topic-list {
	padding-bottom: 50rpx;
}

.topic-item {
	padding: 20rpx 0;
	border-bottom: 1rpx solid #ebedf0;
	
	.topic-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
		display: block;
	}
	
	.topic-count {
		font-size: 24rpx;
		color: #999;
	}
}

/* 可见性选择器 */
.visibility-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 20rpx;
	border-bottom: 1rpx solid #f0f2f5;
	
	.visibility-info {
		flex: 1;
	}
	
	.visibility-name {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 10rpx;
		display: block;
	}
	
	.visibility-desc {
		font-size: 24rpx;
		color: #999;
	}
	
	.iconfont {
		font-size: 36rpx;
		color: #6e8efb;
	}
}
</style>